<!-- 审核 -->
<template>
  <div class="box-content">
    <div class="basic-box">
      <div class="box-left" :style="{ width: leftWidth + '%' }">
        <div class="form-box">
          <a-form-model class="form" :model="form">
            <sectionTitle>基本详情</sectionTitle>
            <a-row>
              <a-col :span="24">
                <a-form-model-item label="信息标题" required>
                  <a-input v-model="form.title" placeholder="请输入信息标题" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="主题类型" required>
                  <a-tree-select
                    style="width: 200px"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    :tree-data="treeData"
                    tree-default-expand-all
                    :treeIcon="true"
                    :showSearch="false"
                    v-model="form.topicTypeVal"
                  >
                  </a-tree-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="紧急程度">
                  <a-select v-model="form.urgent">
                    <a-select-option value="">=请选择= </a-select-option>
                    <a-select-option value="0">非常紧急</a-select-option>
                    <a-select-option value="1">一般紧急</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row class="form-label-text">
              <a-col :span="12">
                <a-form-model-item label="信息来源">
                  <span>{{ form.source }}</span>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="反映人类型">
                  <span>{{ form.peopleType }}</span>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row class="form-label-text">
              <a-col :span="12">
                <a-form-model-item label="联系电话">
                  <span>{{ form.telephone }}</span>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="建议刊物">
                  <span>{{ form.publication }}</span>
                </a-form-model-item>
              </a-col>
            </a-row>
            <sectionTitle>信息内容</sectionTitle>
            <a-form-model-item class="no-label">
              <a-textarea
                v-model="form.desc"
                placeholder="通知内容"
                :rows="8"
                style="height: 400px"
              />
            </a-form-model-item>
            <a-form-model-item class="no-label">
              <div class="label-title">附件</div>
              <a-upload
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :multiple="true"
                :file-list="fileList"
              >
                <a-button v-if="fileList.length <= 0">
                  <a-icon type="upload" /> Upload
                </a-button>
              </a-upload>
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
      <div class="box-right" :style="{ width: rightWidth + '%' }">
        <i @click="changeWidth" :class="iocnClass" class="suncnui"></i>
        <div class="form">
          <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 18 }"
          >
            <sectionTitle>审核意见</sectionTitle>
            <a-form-model-item label="审核意见" prop="strCheckResultState">
              <a-radio-group v-model="form.strCheckResultState">
                <a-radio :value="1">采用</a-radio>
                <a-radio :value="0">不采用</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <div v-if="form.strCheckResultState">
              <a-form-model-item label="消息类型">
                <a-select v-model="form.status">
                  <a-select-option value="1">=请选择消息类型=</a-select-option>
                  <a-select-option value="2">社情民意</a-select-option>
                  <a-select-option value="3">民情</a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="具体意见" prop="suggestions">
                <a-textarea
                  placeholder="请输入具体意见"
                  :rows="4"
                  style="height: 100px"
                />
              </a-form-model-item>
            </div>
            <a-form-model-item label="是否公开">
              <a-radio-group v-model="form.status">
                <a-radio value="1">是</a-radio>
                <a-radio value="2">否</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-form-model>
          <div class="form-footer">
            <a-button type="primary" @click="handleAduit"> 提交审核 </a-button>
            <a-button style="margin-left: 14px" @click="$router.back()">
              暂存
            </a-button>
            <a-button style="margin-left: 14px" @click="$router.back()">
              返回
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import changeWidth from 'mixins/change-width'
import sectionTitle from 'components/base/sectionTitle'
export default {
  components: { sectionTitle },
  data() {
    return {
      treeData: [
        {
          title: '=主题类型=',
          value: '',
          key: '1'
        },
        {
          title: '文化建设',
          value: '文化建设',
          key: '2',
          children: [
            {
              value: '街道文化建设',
              key: '2-1',
              title: '街道文化建设'
            }
          ]
        },
        {
          title: '经济建设',
          value: '经济建设',
          key: '3'
        },
        {
          title: '政协建设',
          value: '政协建设',
          key: '4'
        }
      ],
      id: '',
      records: {},
      form: {
        status: '1',
        suggestions: '',
        strCheckResultState: 1,
        title: undefined,
        topicTypeVal: undefined,
        urgent: '0',
        source: '王大大',
        peopleType: '政协委员',
        telephone: 17681105936,
        publication: undefined,
        resource: '',
        desc: '',
        sessionId: undefined
      },
      rules: {
        status: [{ required: true, trigger: 'change' }],
        suggestions: [{ required: true, trigger: 'change' }],
        strCheckResultState: [{ required: true, trigger: 'change' }]
      },
      fileList: [
        {
          uid: '-1',
          name: 'xxx.png',
          status: 'done',
          url: 'http://www.baidu.com/xxx.png'
        }
      ],
      choiceVisible: false
    }
  },
  mixins: [changeWidth],
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    //审核确定回调
    handleAduit() {}
  },
  created() {}
}
</script>
<style lang='less' scoped>
.box-content {
  padding: 15px;
  box-sizing: border-box;
  background: #fff;
}
.form {
  padding: 0;
  position: relative;
  height: 100%;
  overflow-y: auto;
  /deep/.ant-form-item {
    padding: 0px 30px 15px 0px;
  }
  /deep/.form-label-text .ant-form-item label {
    color: #919191;
  }
  /deep/.no-label .ant-form-item-control-wrapper {
    width: 100% !important;
  }
}
.label-title {
  font-size: 14px;
  color: #555555;
  font-weight: bold;
}
.form-footer {
  position: absolute;
  padding: 15px 0;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.box-right {
  overflow: initial;
  padding: 0 15px;
  box-sizing: border-box;
  transition: width 1s;
}
.box-left {
  padding: 0;
  transition: width 1s;
}
.suncnui {
  height: 30px;
  line-height: 30px;
  background: @base-color;
  padding: 0 18px;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  font-size: 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  width: 60px;
  position: absolute;
  top: 0px;
  left: -60px;
}
/deep/ .ant-select {
  color: #333;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
}
/deep/ .ant-select-selection {
  border-radius: 2px;
  height: 40px;
}
/deep/ .ant-select-selection__rendered {
  line-height: 38px;
}
</style>